<template>
    <div class="content">
        <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
            <!-- 背景图 -->
            <div class="background"></div>
            <!-- 头部区 -->
            <HomeSearch></HomeSearch>
            <!-- 轮播图 -->
            <Banner :bannerList="bannerList"></Banner>
            <!-- 商品分类区 -->
            <Category></Category>
            <!-- 每日精选好货 -->
            <EveyDay></EveyDay>
            <!-- 商品列表 公共组件-->
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <GoodList :list="goodsList"></GoodList>
            </van-list>
        </van-pull-refresh>
        <!-- 未登录提示区 -->
        <LoginBox></LoginBox>
    </div>
</template>

<script setup lang="ts">

import GoodList from '@/components/GoodList.vue'
import LoginBox from '@/views/platform/home/LoginBox.vue'
import EveyDay from '@/views/platform/home/EveyDay.vue'
import Category from '@/views/platform/home/Category.vue'
import HomeSearch from '@/views/platform/home/HomeSearch.vue'
import Banner from '@/views/platform/home/Banner.vue'

import { useBanner,useGoods } from '@/hooks/home'
const { bannerList,getBannerList } = useBanner()
const { goodsList, loading, finished, refreshLoading, onLoad, onRefresh } = useGoods(getBannerList)

// 测试
// console.log(goodsList)


</script>

<style lang="scss" scoped>
.content {
    position: relative;
    .background {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 240px;
        border-radius: 0 0 40px 40px;
        background-color: #ff3d40;
        z-index: -99;
    }
}
// 外部字体引入
@font-face {
    font-family: 'cute';
    src: url('../assets/font/也字工厂可爱颜文字体.ttf') format('truetype');
}
</style>
